<template>
  <view class="container" :class="!isSearch ? '' : 'bg'" :style="!isSearch?'height: calc(100vh - 98rpx)': 'height: calc(100vh - 186rpx)'">
      <view class="page_top">
          <view class="home_title" :class="isSearch?'hasBack':''">
              <view v-if="isSearch" @click="backFn" class="backImage">
                  <image src="../static/images/left.svg"></image>
              </view>
              <view v-else></view>
              <!--              <view :style="isSearch?'color: #000':'color: #fff'">首页</view>-->
              <u-search class="search" placeholder="请输入搜索信息"
                        :showAction="true" actionText="取消"
                        :animation="true" @focus="focusFn"
                        @custom="cancelFn" @clear="clearFn"
                        input-align="center" shape="square"
                        :show-action="false" bgColor="white"
                        :borderColor="!isSearch ? '#fff !important' : '#0084FF !important'"
                        :placeholderColor="!isSearch ? '#fff' : '#C2C7CC'"
                        :searchIconColor="!isSearch ? '#fff !important' : '#C2C7CC !important'"
                        v-model="keyWords"></u-search>
              <view></view>
          </view>
      </view>
    
      <view class="page_middle_scroll">
          <view style="width: 100%" v-if="!isSearch">
    
              <view class="tabs">
                  <view class="words" v-for="(item, index) in tabsList" :key="index" @click="toModular(item)">
                      <!-- <u-icon class="top" name="bookmark-fill" color="#fff" size="28"></u-icon> -->
                      <image v-if="index == 0" src="../static/images/home/tab1.svg"></image>
                      <image v-if="index == 1" src="../static/images/home/tab2.svg"></image>
                      <image v-if="index == 2" src="../static/images/home/tab3.svg"></image>
                      <image v-if="index == 3" src="../static/images/home/tab4.svg"></image>
                      <image v-if="index == 4" src="../static/images/home/tab5.svg"></image>
            
                      <view class="bottom">{{ item.fileType }}</view>
                  </view>
              </view>
              <!-- 知识推荐 -->
              <view class="recommendation knowledge">
                  <view class="header">
                      <view class="left">
                          <image class="icon" src="../static/images/home/list1.svg"></image>
                          <text class="title">知识推荐</text>
                      </view>
                    <view class="change_batch" @click="getRecommendList">
                        <text>换一换</text>
                        <image src="../static/images/home/refresh.svg"></image>
                        <!-- <u-icon class="icon" name="reload"></u-icon> -->
                    </view>
                </view>
                <view class="process_list">
                    <view class="process" v-for="(item, index) in recommendList" :key="'recommend' + index">
                        <image :src="imageFn(index)"></image>
                        <view class="process_info" @click="handlePreview(item)">
                            <view class="process_info_title">{{ item.fileName }}</view>
                            <view class="info">
                                <view v-if="item.author">{{ item.author }}</view>
                                <view>{{ item.updateTime }}</view>
                                <view>{{ item.fileVersion }}{{ item.versionStatusName }}</view>
                            </view>
                        </view>
                        <image class="type" style="width: 155rpx; height: 86rpx" :src="knowImage(item.fileTypeId)"></image>
                    </view>
                </view>
            </view>
            <!-- 热门工艺知识 -->
            <view class="recommendation knowledge">
                <view class="header">
                    <view class="left">
                        <image class="icon" src="../static/images/home/list2.svg"></image>
                        <text class="title">热门工艺知识</text>
                    </view>
                    <!-- <view class="change_batch">
                                  <image style="height: 34rpx;" src="../static/images/home/right.svg"></image>
                              </view> -->
                </view>
                <view class="process_list">
                    <view class="process" v-for="(item, index) in topTableList" :key="'recommend' + index">
                      <image :src="imageFn(index)"></image>
                        <view class="process_info" @click="handlePreview(item)">
                            <view class="process_info_title">{{ item.fileName }}</view>
                            <view class="info">
                                <view v-if="item.author">{{ item.author }}</view>
                                <view>{{ item.uploadTime }}</view>
                                <view>{{ item.fileVersion }}{{ item.versionStatusName }}</view>
                            </view>
                        </view>
                        <!-- 	<view @click="collectionFn(item, 'topTable')">
                                        <image :src="
                                                item.collect === 1
                                                    ? '../static/images/home/heart_fill.png'
                                                    : '../static/images/home/heart.png'
                                            " style="width: 36rpx;height:36rpx"></image>
                                    </view> -->
                        <image  mode="heightFix" style="width: 97rpx; height: 86rpx;margin-left:58rpx;" :src="knowImage1(item.fileTypeId)"></image>
                        <!-- <image class="type" mode="right" style="width: 155rpx; height: 86rpx" :src="knowImage1(item.fileTypeId)"></image> -->
                        <!-- width:82rpx;height: 108rpx; -->
                    </view>
                </view>
            </view>
            <!-- 贡献值排行 -->
            <view class="recommendation knowledge">
                <view class="header">
                    <view class="left">
                        <image class="icon" src="../static/images/home/list3.svg"></image>
                        <text class="title">贡献值排行</text>
                    </view>
                </view>
                <view class="rank_lists">
                    <view class="rank_list" v-for="(item, index) in rankList" :key="'rank' + index">
                        <!-- 						<view class="rank_list-top">
                                        <text class="order"
                                            :style="index === 0 ? 'color: #F53F3F;' : index === 1 ? 'color: #FAAD14;' : ''">{{ index + 1 }}</text>
                                    </view> -->
                        <image class="head" :src="index / 2 == 0 ? '../static/images/head1.png' : '../static/images/head2.png'"></image>
                        <view class="user">
                            <view class="name">{{ item.uploadUser }}</view>
                            <view class="list">
                                <text
                                >知识上传:
                                    <text style="color: #0084ff; padding-left: 10rpx">
                                        {{ item.uploads }}
                                    </text>
                                </text>
                            </view>
                            <view class="list">
                                <text
                                >总浏览量:
                                    <text style="color: #0084ff; padding-left: 10rpx">
                                        {{ item.views }}
                                    </text>
                                </text>
                            </view>
                        </view>
                    
                        <view class="contribution">
                            <view class="name">贡献值评价:
                                <text class="text">{{ item.contributions }}</text>
                            </view>
                            <view class="list">
                                <text>获点赞:
                                    <text style="color: #0084ff; padding-left: 10rpx">
                                        {{ item.likes }}
                                    </text>
                                </text>
                            </view>
                            <view class="list">
                                <text
                                >获收藏:
                                    <text style="color: #0084ff; padding-left: 10rpx">
                                        {{ item.collects }}
                                    </text>
                                </text>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </view>
        <!-- 搜索模块 -->
    
        <view class="search_model" v-else-if="isSearch && !isLoading">
            <view v-if="!isProgress">
<!--                <view v-if="!keyWords">-->
                <view>
                    <view class="header">
                        <image class="histroy" src="../static/images/histroy.png"></image>
                        <text>搜索历史</text>
                        <u-icon class="delete" @click="delHistoryFn" name="trash" color="#8D7777" size="22"></u-icon>
                    </view>
                    <view class="screen_content" v-if="historyList.length > 0">
                        <view class="content_item" @click="historyFn(item)" v-for="(item, index) in historyList">
                            <view class="process_number" :style="index === 0 ? 'background: #FF312A;' : index === 1 ? 'background: #F76A60;' : index === 2 ? 'background: #F7BB60;' : ''">{{ index + 1 }} </view>
                            <view class="content_text">{{ item }}</view>
                        </view>
                    </view>
    
                    <!-- 热词推荐 -->
                    <view class="recommendation collect">
                        <view class="header">
                            <view class="left">
                                <image class="type" src="../static/images/collect.png" mode=""></image>
                                <text class="title" style="margin-left: 0rpx">热词推荐</text>
                            </view>
                            <view class="change_batch" @click="getHotWordsList">
                                <text>换一换</text>
                                <image class="reload" src="../static/images/reload.svg"></image>
                            </view>
                        </view>
                        <view class="hot_words">
                            <view v-if="hotWordsList && hotWordsList.length === 0">暂无数据</view>
                            <view class="words" v-for="(item, index) in hotWordsList" @click="wordsSearchFn(item)" :key="index">
                                {{ item }}
                            </view>
                        </view>
                    </view>
                </view>
<!--                <view v-else class="filter_view">
                    <view class="filter_view_text" v-for="(item, index) in keyWordLists" @click="handleKeyWords(item)">{{item}}</view>
                </view>-->
            </view>
            <view class="search_header" v-if="isProgress">
                <view style="font-weight: bold" class="line-height"><image src="../static/images/fileManage/file_title_icon.svg"></image> 检索结果 {{ totalSize }} 项</view>
                <view class="line-height line_height" @click="screenFn"> 筛选
                    <image :src="screenFlag ? '../static/images/home/screen_blue.svg' : '../static/images/home/screen_gray.svg'" style="margin-left: 20rpx" mode=""></image>
                </view>
            </view>
            <scroll-view v-if="isProgress" scroll-y="true" :scroll-top="scrollTop" @scrolltolower="scrolltolowerFn" class="search_model_scroll" :lower-threshold="50">
                <view v-if="processList && processList.length === 0" class="empty_class">
                    <image src="../static/images/empty.svg" style="width: 224rpx; height: 338rpx; margin: 0 auto"></image>
                </view>
                <view class="screen_content" v-else>
                    <view class="screen_lists">
                        <view v-for="(item, index) in processList" :key="index" class="screen_lists_item">
                            <view class="screen_list">
                                <image class="like-icon" @click="collectionFn(item)" :src="item.collect === 0 ? '../static/images/home/like_gray.svg' : '../static/images/home/like_red.svg'"></image>
                                <view class="screen_title_info" @click="handlePreview(item, true)">
                                    <view class="screen_title" :class="item.openFlag ? 'more-line-clamp' : 'one-line-clamp'">
                                        {{ item.fileName }}
                                    </view>
                                    <view class="screen_version"> {{ item.updateTime }} | {{ item.fileVersion }} | {{ item.versionStatusName }} </view>
                                </view>
                                <image class="screen_type" :src="knowImage(item.fileTypeId)"></image>
                            </view>
                            <view class="screen_info" :class="item.openFlag ? 'more-line-clamp' : 'one-line-clamp'">
                                {{ item.ext.items[0].text }}
                            </view>
                            <view class="screen_bottom" :class="item.openFlag ? 'blue' : 'gray'" @click="item.openFlag = !item.openFlag">
                                {{ item.openFlag ? "收起" : "展开" }}
                                <u-icon size="12" :name="item.openFlag ? 'arrow-up' : 'arrow-down'" :color="item.openFlag ? '#0084FF' : '#4C5A67'" style="margin-left: 12rpx"></u-icon>
                            </view>
                        </view>
                        <view v-if="loadmore" class="loadMore">—已加载全部—</view>
                    </view>
                </view>
            </scroll-view>
        </view>
        <u-loading-page v-if="isLoading" :loading="isLoading" loading-text="正在检索中..."></u-loading-page>
        <!-- 筛选弹窗 -->
        <u-popup @touchmove.stop.prevent="()=>{}" :show="show" @close="closePopup" :round="10" mode="bottom">
            <view class="screen_model">
                <view class="screen_model_title">筛选</view>
                <view class="screen_model_box">
                    <view class="screen_model_box_title"><image src="../static/images/home/model_blue.svg"></image>专业类型</view>
                    <view class="u-page__tag-item">
                        <view class="tag one-line-clamp" v-for="(item, index) in professionList" :key="'profession' + index" :class="item.checked ? 'tag_blue' : 'tag_gray'" @click="professionClick(item)">
                            {{ item.text }}
                        </view>
                    </view>
                </view>
                <view class="screen_model_box">
                    <view class="screen_model_box_title"><image src="../static/images/home/model_orange.svg"></image>文件类型</view>
                    <view class="u-page__tag-item">
                        <view class="tag one-line-clamp" v-for="(item, index) in fileTypeList" :key="'fileType' + index" :class="item.checked ? 'tag_blue' : 'tag_gray'" @click="fileTypeClick(item)">
                            {{ item.text }}
                        </view>
                    </view>
                </view>
                <view class="screen_model_box">
                    <view class="screen_model_box_title"><image src="../static/images/home/model_green.svg"></image>排序规则</view>
                    <view class="u-page__tag-item">
                        <view class="tag one-line-clamp" v-for="(item, index) in orderByList" :key="'orderBy' + index" :class="item.checked ? 'tag_blue' : 'tag_gray'" @click="orderByClick(item)">
                            {{ item.text }}
                        </view>
                    </view>
                </view>
                <view class="screen_model_bottom">
                    <u-button text="清空" @click="emptyFn"></u-button>
                    <u-button type="primary" text="确定" @click="sureFn"></u-button>
                </view>
            </view>
        </u-popup>
    </view>
      <view class="page_bottom"></view>
  </view>
</template>

<script>
export default {
  onLoad() {
      this.isSearch = false
      this.isProgress = false
      this.keyWords = ''
  },
  onShow() {
    // 这里初始化
    // 在页面显示时恢复输入框的值
      this.saveKeyWords = false
    this.isSearch = uni.getStorageSync('isSearch') || false
    this.isProgress = uni.getStorageSync('isProgress') || false
    uni.removeStorageSync('isSearch')
    uni.removeStorageSync('isProgress')
    // if(!this.isSearch){
    //   document.getElementsByTagName("uni-page-head")[0].style.display = "none";
    // }else{
    //   document.getElementsByTagName("uni-page-head")[0].style.display = "block";
    // }
    

    this.getRefresh();
  },
  onHide(){
      // console.log('关闭时状态',this.isSearch,this.isProgress)
        // 在页面隐藏时保存输入框的值
      if (this.saveKeyWords) {
          this.isSearch ? uni.setStorageSync('isSearch', this.isSearch) : ''
          this.isProgress ?  uni.setStorageSync('isProgress', this.isProgress) : ''
      } else {
          this.keyWords = ''
      }
  },
  data() {
    return {
        saveKeyWords: false,
        screenFlag: false,
        scrollTop:0,
      isSearch: false,
      isProgress: false,
      show: false, //筛选弹窗
      isLoading: false,
      keyWords: "",
      sort: "asc",
      pageNumber: 1,
      pageSize: 10,
      totalPage: 0,
      totalSize: "",
      tabsList: [],
      hotWordsList: [],
      processList: [],
      fileTypeList: [],
      fileType: "",
      professionList: [],
      profession: "",
      orderByList: [
        {
          text: "相关性",
          checked: false,
          id: 1,
        },
        {
          text: "更新日期",
          checked: false,
          id: 3,
        },
        {
          text: "总收藏数",
          checked: false,
          id: 2,
        },
      ],
      historyList: [],
      orderBy: "",
      recommendList: [],
      topTableList: [],
      timer: null,
      rankList: [],
      loadmore: false,
        keyWordLists: []
    };
  },
  computed: {
    imageFn(){
      return(item) => {
        return require(`../static/images/home/${item+1}.svg`)
      }
    },
    fileTypeFn() {
      return (item) => {
        if (item == "word") {
          return require("../static/images/word.png");
        }
        if (item == "ppt") {
          return require("../static/images/ppt.png");
        }
        if (item == "pdf") {
          return require("../static/images/pdf.png");
        }
        if (item == "excel") {
          return require("../static/images/excel.png");
        }
        if (item == "video") {
          return require("../static/images/video.png");
        }
      };
    },
    knowImage() {
      return (item) => {
        if (item == 31) {
          return require("../static/images/home/know1.svg");
        }
        if (item == "32") {
          return require("../static/images/home/know2.svg");
        }
        if (item == "33") {
          return require("../static/images/home/know3.svg");
        }
          if (item == '34') {
              return require('../static/images/home/know4.svg')
          }
          if (item == '38') {
              return require('../static/images/home/know5.svg')
          } else {
              return require('../static/images/home/know6.svg')
          }
      };
    },
    knowImage1() {
      return (item) => {
        if (item == 31) {
          return require("../static/images/home/knowl1.svg");
        }
        if (item == "32") {
          return require("../static/images/home/knowl2.svg");
        }
        if (item == "33") {
          return require("../static/images/home/knowl3.svg");
        }
          if (item == '34') {
              return require('../static/images/home/knowl4.svg')
          }
          if (item == '38') {
              return require('../static/images/home/knowl5.svg')
          } else {
              return require('../static/images/home/knowl6.svg')
          }
      };
    },
  },
  watch: {
    keyWords: {
      handler(newVal, oldVal) {
          this.pageNumber = 1;
          this.pageSize = 10;
          this.totalPage = 0;
          this.totalSize = 0;
        if (newVal) {
            this.keyWordLists = []
            this.keyWordLists[0] = newVal
          clearTimeout(this.timer);
          this.timer = setTimeout(() => {
          	this.isProgress = true
          	this.isLoading = true;
          	this.getRefresh();
          }, 300)
        }
      },
    },
    isSearch: {
      handler(newVal, oldVal) {
        if (newVal) {
          // document.getElementsByTagName("uni-page-head")[0].style.display = "block";
          const element = document.getElementsByClassName("container");
          console.log(element, "55555");
          // 去除 background-image
          // element.style.backgroundImage = 'none';
        } else {
          // document.getElementsByTagName("uni-page-head")[0].style.display = "none";
        }
      },
      deep: true,
    },
  },

  onPullDownRefresh() {
    this.pageNumber = 1;
    this.pageSize = 10;
    this.totalPage = 0;
    this.totalSize = "";
    this.getRefresh();
    setTimeout(() => {
      this.loadmore = false;
      uni.stopPullDownRefresh();
    }, 1000);
  },
  onReachBottom() {
    if (this.pageNumber >= this.totalPage) {
      this.loadmore = false;
      return;
    }
    this.pageNumber = this.pageNumber + 1;
    if (this.pageNumber > this.totalPage) {
    } else {
      this.getRefresh();
    }
  },
  mounted() {
    this.getHotWordsList();
    this.fileTypeListFn();
    this.professionListFn();
    this.getRecommendList();
    this.getHotKnowledge();
    this.getTabsList();
    this.historyListFn();
  },
  onShow() {
    this.getRankList();
  },
  methods: {
      backFn() {
          this.isSearch = false
      },
    historyListFn() {
      this.$request({
        url: "/knowledgeSearch/history",
        method: "get",
        params: {},
      }).then(({ data }) => {
        this.historyList = data.splice(0, 5);
      });
    },
    // 清空历史搜索
    delHistoryFn() {
      this.$request({
        url: "/knowledgeSearch/deleteHistory",
        method: "post",
        params: {},
      }).then((res) => {
        console.log("fff", res);
        if (res.code == 200) {
          this.$modal.loading("删除成功");

          this.historyList = [];
          setTimeout(() => {
            this.$modal.closeLoading();
          }, 1000);
        }
      });
    },
    // 跳转到文件查看页面
    toModular(item) {
      uni.navigateTo({
        url: `/pages/fileview?fileType=${item.id}`,
      });
    },
    getTabsList() {
      this.$request({
        url: "/front/statistic",
        method: "get",
        params: {},
      }).then(({ data }) => {
        this.tabsList = data;
      });
    },
    getRecommendList() {
      this.$request({
        url: "/front/recommend",
        method: "get",
        params: {},
      }).then(({ data }) => {
        this.recommendList = data.splice(0, 10);
      });
    },
    getHotKnowledge() {
      this.$request({
        url: "/knowledgeSearch/hotKnowledge",
        method: "get",
        params: {},
      }).then(({ data }) => {
        this.topTableList = data.splice(0, 10);
      });
    },
    getRankList() {
      this.$request({
        url: "/contribution/rank",
        method: "get",
        params: {},
      }).then(({ data }) => {
        this.rankList = data;
      });
    },
      // scroll 触底操作
      scrolltolowerFn(e) {
          console.log("看看滚动条这个事件", e);
          if (this.pageNumber >= this.totalPage) {
              this.loadmore = true;
              return;
          }
          this.pageNumber = this.pageNumber + 1;
          if (this.pageNumber > this.totalPage) {
          } else {
              this.getRefresh();
          }
      },
      handleKeyWords(item) {
          this.keyWords = item
          this.isProgress = true
          this.isLoading = true;
          this.getRefresh();
      },
    getRefresh() {
        if (this.pageNumber === 1) {
            this.isLoading = true
        }
      this.$request({
        url: "/knowledgeSearch/search",
        method: "get",
        params: {
          keyWords: this.keyWords,
          professionList: this.profession,
          typeList: this.fileType,
          sort: this.orderBy,
          pageNumber: this.pageNumber,
          pageSize: this.pageSize,
        },
      }).then(({ data }) => {
    
          this.scrollTop = 0
        if (this.pageNumber === 1) {
          this.processList = [];
        }
        this.totalPage = data.totalPage;
        this.totalSize = data.totalSize;
          let processList = data.data.map((item) => {
              return {
                  ...item,
                  openFlag: false,
              };
          });
          this.processList = this.processList.concat(processList);
          this.isLoading = false;
      }).catch(()=> {
          this.isLoading = false;
      });
    },
    getHotWordsList() {
      this.$request({
        url: "/knowledgeSearch/hot",
        method: "get",
        params: {},
      }).then(({ data }) => {
        this.hotWordsList = data;
      });
    },
    wordsSearchFn(item) {
      this.keyWords = item;
      this.isSearch = true;
    },

    //专业字典
    professionListFn() {
      this.$request({
        url: "/dict/major/list",
        method: "GET",
        params: {},
      }).then(({ data }) => {
        data.data.forEach((item) => {
          this.professionList.push({
            value: item.id,
            text: item.name,
            dictCode: item.dictCode,
            checked: false,
          });
        });
      });
    },
    historyFn(item) {
      this.keyWords = item;
    },
    cancelFn() {
      console.log("取消按钮");
      this.keyWords = "";
      this.isSearch = false;
      this.isProgress = false;
    },
    clearFn() {
      // this.isSearch = false;
      this.isProgress = false;
      this.keyWords = "";
    },
    closePopup() {
      this.show = false;
    },
    professionClick(row) {
      row.checked = !row.checked;
    },
    fileTypeClick(row) {
      row.checked = !row.checked;
    },
    emptyFn() {
      this.orderByList.forEach((item) => {
        item.checked = false;
      });
      this.professionList.forEach((item) => {
        item.checked = false;
      });
      this.fileTypeList.forEach((item) => {
        item.checked = false;
      });
      this.screenFlag = false;
      this.pageNumber = 1;
      this.pageSize = 10;
      this.totalPage = 0;
      this.totalSize = "";
      this.profession = "";
      this.fileType = "";
      this.orderBy = "";
      this.show = false;
      this.pageNumber = 1
      this.getRefresh();
    },
    sureFn() {
      let orderBy = this.orderByList.filter((item) => item.checked);
      this.orderBy = orderBy
        .map((item) => {
          return item.id;
        })
        .join(",");

      let fileType = this.fileTypeList.filter((item) => item.checked);
      this.fileType = fileType
        .map((item) => {
          return item.value;
        })
        .join(",");

      let profession = this.professionList.filter((item) => item.checked);
      this.profession = profession
        .map((item) => {
          return item.value;
        })
        .join(",");
      this.show = false;
      if (this.profession || this.fileType || this.orderBy) {
          this.screenFlag = true
      } else {
          this.screenFlag = false
      }
      this.pageNumber = 1
      this.getRefresh();
    },

    // // 预览并查询关键字
    // previewFn(item){
    // 		if (true) {
    // 		    uni.navigateTo({
    // 		        url: `/pages/preview?info=` +  encodeURIComponent(JSON.stringify(item))+`&isSearch=true`,

    // 		    })
    // 		} else {
    // 		    uni.navigateTo({
    // 		        url: `/pages/player?info=` +  encodeURIComponent(JSON.stringify(item))
    // 		    })
    // 		}
    // },

    //文件字典
    fileTypeListFn() {
      this.$request({
        url: "/dict/file/list",
        method: "get",
        params: {},
      }).then(({ data }) => {
        data.data.forEach((item) => {
          this.fileTypeList.push({
            value: item.id,
            text: item.name,
            dictType: item.dictType,
            dictCode: item.dictCode,
            checked: false,
          });
        });
      });
    },
    focusFn() {
      this.isSearch = true;
      this.historyListFn();
    },
    screenFn() {
      this.show = true;
    },
    collectionFn(item, type) {
      let url = item.collect === 1 ? "/knowledgeCollect/delete" : "/knowledgeCollect/add";
      this.$request({
        url: url,
        method: "post",
        data: {
          collectType: "2",
          knowledgeFileId: item.id,
        },
      }).then(({ data }) => {
        if (item.collect === 1) {
          item.collect = 0
            item.collectNumber--
            this.$toast('已取消收藏')
        } else {
            item.collect = 1
            item.collectNumber++
            this.$toast('已收藏')
        }
        // setTimeout(() => {
        //   this.$modal.closeLoading();
        //   if (this.isSearch) {
        //     this.getRefresh();
        //   } else {
        //     if (type === "recommend") {
        //       this.getRecommendList();
        //     } else {
        //       this.getHotKnowledge();
        //     }
        //   }
        // }, 1000);
      });
    },
    orderByClick(row) {
      this.orderByList.forEach((item) => {
        item.checked = false;
      });
      row.checked = !row.checked;
    },

    handlePreview(item, search) {
      this.$request({
        url: "/knowledgeData/release/preview",
        method: "get",
        params: {
          id: item.id,
        },
      }).then(({ data }) => {
        console.log(data, "fff");
        if (data.readAuthority == false) {
          this.$toast(data.message);
          setTimeout(() => {
            this.$modal.closeLoading();
          }, 1000);
          return;
        }

        console.log(item, "预览文件");
        this.saveKeyWords = true
        if (item.fileType == "video") {
          uni.navigateTo({
            url: `/pages/player?info=` + encodeURIComponent(JSON.stringify(item)) + `&search=` + search,
          });
        }
        // 指导书需要跳转的地方
        else if (Number(item.fileTypeId) === 34) {
          uni.navigateTo({
            url: `/pages/guideBookPreview?info=` + encodeURIComponent(JSON.stringify(item)) + `&search=` + search,
          });
        } else if (item.fileTypeId == 38) {
          uni.navigateTo({
            url: `/pages/player?info=` + encodeURIComponent(JSON.stringify(item)) + `&search=` + search,
          });
        } else if (item.fileTypeId == 32) {
          uni.navigateTo({
            url: `/pages/page2Preview?info=` + encodeURIComponent(JSON.stringify(item)) + `&search=` + search,
          });
        }else if (item.fileTypeId == 33) {
          uni.navigateTo({
            url: `/pages/tablePreview?info=` + encodeURIComponent(JSON.stringify(item)) + `&search=` + search,
          });
        } else {
          uni.navigateTo({
            url: `/pages/page1Preview?info=` + encodeURIComponent(JSON.stringify(item)) + `&search=` + search,
          });
        }
      }).catch( ()=> {
          this.saveKeyWords = false
      });
    },
    searchHandlePreview(item, search) {
      console.log(item, "文件信息");
      return;

      // 指导书需要跳转的地方
      if (item.file_detail.extra.file_category === "D") {
        uni.navigateTo({
          url: `/pages/guideBookPreview?info=` + encodeURIComponent(JSON.stringify(datainfo)) + `&search=` + search,
        });
      } else if (item.file_detail.extra.file_category === "E") {
        uni.navigateTo({
          url: `/pages/player?info=` + encodeURIComponent(JSON.stringify(datainfo)) + `&search=` + search,
        });
      } else if (item.file_detail.extra.file_category === "B") {
        uni.navigateTo({
          url: `/pages/page2Preview?info=` + encodeURIComponent(JSON.stringify(datainfo)) + `&search=` + search,
        });
      } else if (item.file_detail.extra.file_category === "C") {
        uni.navigateTo({
          url: `/pages/tablePreview?info=` + encodeURIComponent(JSON.stringify(datainfo)) + `&search=` + search,
        });
      } else {
        uni.navigateTo({
          url: `/pages/page1Preview?info=` + encodeURIComponent(JSON.stringify(item)) + `&search=` + search,
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.home_title {
    //height: 100rpx;
    text-align: center;
    font-size: 30rpx;
    color: #FFFFFF;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 68rpx 0 60rpx;
    
    &.hasBack {
        margin: 28rpx 0 38rpx;
        
        .backImage {
            width: 64rpx;
            min-width: 64rpx;
            height: 64rpx;
            border-radius: 16rpx;
            background: #FFFFFF;
            margin-right: 30rpx;
            display: flex;
            justify-content: center;
            align-items: center;
            
            image {
                width: 16rpx;
                height: 32rpx;
            }
        }
    }
}

.bg.container {
  // background: linear-gradient(180deg, #7abcf8 0%, #fff 36%, #f9fbfc 100%);
  background-image: none !important;
  background: #f5f7fb !important;
    .page_top .search{
        margin-bottom: 0!important;
    }
}

::v-deep .u-search {
  flex: none !important;
}

::v-deep .uicon-search,
.u-search__action--active {
  color: white !important;
}
::v-deep .u-search__action{
    font-family: Arial;
}
::v-deep .uni-input-placeholder {
    text-align: center;
    // color: white !important;
    font-size: 30rpx;
    font-family: Arial;
}
.bg ::v-deep .uni-input-placeholder {
    text-align: left;
}
::v-deep .uni-input-input {
  text-align: left;
  // color: white !important;
  font-size: 30rpx;
    font-family: Arial;
}

::v-deep .u-search__content {
  height: 64rpx !important;
  line-height: 64rpx !important;
  border-radius: 60rpx !important;
  color: #ffffff;
  border: 2rpx solid #ffffff !important;
  background: rgba(255, 255, 255, 0.2) !important;
  // background:#8AC2F9 !important;
}

::v-deep input {
  // background: rgba(255, 255, 255,0.2) !important;
  background: none !important;
  // backdrop-filter: blur(10rpx);
}

.container {
  width: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 30rpx;
  background: url("../static/images/home/bg.jpg") no-repeat;
  background-size: 100%;
    box-sizing: border-box;
  .page_top{
      max-height: 224rpx;
      width: 100%;
    
      .search {
          width: 100%;
          flex: 1 !important;
          color: #FFFFFF !important;
          text-align: center;
          //margin-bottom: 60rpx !important;
          border-radius: 60rpx !important;
      }
  }

  .tabs {
    width: 100%;
    height: 270rpx;
    margin: 0 0 30rpx;
    // margin-top: 120rpx;
    border-radius: 16rpx;
    // opacity: 0.6;
    background: #ffffff;
    // backdrop-filter: blur(6rpx);
    padding: 40rpx 0;
    color: white;
    display: flex;
    overflow-x: auto;
    /* 兼容性处理 */
    gap: 15rpx;
    padding-left: 22rpx;
    padding-right: 22rpx;
    background: linear-gradient(180deg, #d2e7fb 0%, #eff5fb 100%);

    .words {
      flex: 0 0 auto;
      padding: 0 10rpx;
      white-space: wrap;
      width: 21%;
      // margin: 2% 2.5%;
      border-radius: 10rpx;
      display: flex;
      flex-direction: column;
      align-items: center;

      .top {
        font-size: 36rpx;
        font-weight: bold;
        text-align: center;
        height: 90rpx;
        line-height: 120rpx;
      }

      .middle {
        font-size: 24rpx;
        text-align: center;
        height: 44rpx;
        // color: #828d99;
        color: white;
      }

      image {
        width: 100rpx;
        height: 100rpx;
      }

      .bottom {
        font-size: 28rpx;
        text-align: center;
        height: 60rpx;
        padding: 30rpx 5rpx 0 0;
        color: #1c2126;
        font-weight: 500;
        font-family: Source Han Sans;
      }
    }
  }
    .page_middle_scroll{
        //height: calc(100vh - 324rpx);
        flex: 1;
        width: 100%;
        overflow-y: auto;
    }
    .page_bottom{
        height: 1rpx;
        background: transparent;
        width: 100%;
    }
}

.knowledge {
  width: 100%;
  margin: 40rpx auto 0;
  border-bottom: none !important;
}

.collect {
  .header {
    color: #f53f3f !important;
    font-size: 28rpx !important;

    .type {
      width: 36rpx;
      height: 36rpx;
      margin-bottom: -5rpx;
      margin-right: 20rpx;
    }
  }
}

.recommendation {
  width: 100%;
  margin: 40rpx auto 0;
  // border: 1px solid #8f8f94;
  border-radius: 10rpx;
  // background: #fff;

  .icon {
    width: 40rpx;
    height: 40rpx;
    // justify-content:flex-start;
  }

  .header {
    width: 100%;
    // border-bottom: 1rpx solid #EAECEF;
    padding: 20rpx 14rpx;
    display: flex;
    justify-content: space-between;

    .left {
      display: flex;
      justify-content: space-between;
    }

    .title {
      font-size: 32rpx;
      font-weight: 500;
      margin-left: 20rpx;
        font-family: Source Han Sans;
    }

    .change_batch {
      float: right;
      display: flex;
      align-items: center;
      color: #4c5a67;
      font-size: 28rpx;
      font-family: 思源黑体;
      // flex: 1;
      .icon {
        float: right;
      }
      .reload {
        width: 30rpx;
        height: 30rpx;
        margin-left: 20rpx;
      }
      image {
        // margin-left: 20rpx;
        width: 40rpx;
        height: 40rpx;
      }
    }
  }

  .hot_words {
    width: 100%;
    height: auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    padding: 18rpx;
    gap: 18rpx;
    background: #ffffff;
    border-radius: 16rpx;
    font-size: 30rpx;
    .words {
      width: 100%;
      height: 70rpx;
      padding: 0 18rpx;
      box-sizing: border-box;
      border-radius: 16rpx;
      color: #1c2126;
      background: #f6f6f6;
      line-height: 70rpx;
      text-align: center;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      // font-weight: 550;
        font-family: 思源黑体;
    }
  }
}

.rank_lists {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  item-align: flex-start;
  background: white;
  border-radius: 16rpx;

  .rank_list {
    // width: 90%;
    border-bottom: 2rpx solid #eaecef;
    padding: 40rpx 20rpx;
    height: 220rpx;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;

    .list {
      display: flex;
      align-items: center;
      color: #4c5a67;
      font-size: 24rpx;
        font-family: Source Han Sans;
        font-weight: 500;
    }

    .list:nth-child(1) {
      // margin-top: -20rpx;
    }

    .user {
      display: flex;
      flex-direction: column;
      justify-content: space-evenly;
      height: 100%;
      font-size: 26rpx;
      // margin-left: -25%;
      width: 40%;

      .name {
        font-size: 28rpx !important;
        color: #1c2126;
        font-weight: 550;
        margin-bottom: 30rpx;
      }

      .zs {
        width: 24rpx;
        height: 24rpx;
        margin-right: 10rpx;
      }

      .lll {
        width: 30rpx;
        height: 28rpx;
        margin-right: 10rpx;
      }
    }

    .contribution {
      display: flex;
      flex-direction: column;
      justify-content: space-evenly;
      height: 101%;
      line-height: 20rpx;
      width: 40%;
      .name {
        font-size: 24rpx;
        color: #4c5a67;
          font-family: 思源黑体;
        margin-bottom: 37rpx;

        .text {
          color: #faad14;
          font-size: 36rpx;
          padding-left: 20rpx;
        }
      }

      .name:nth-child(odd) {
        .text {
          color: #f53f3f !important;
        }
      }

      .dz {
        width: 26rpx;
        height: 24rpx;
        margin-right: 10rpx;
      }

      .sc {
        width: 24rpx;
        height: 24rpx;
        margin-right: 10rpx;
      }
    }

    .head {
      width: 104rpx;
      height: 104rpx;
      // margin-left: 20rpx;
    }

    .rank_list-top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 30rpx;

      .order {
        font-weight: bold;
        font-size: 36rpx;
      }

      .text {
        color: #828d99;
      }

      .font {
        color: #1c2126;
      }

      .name {
        flex: 1;
        color: #1c2126;
        font-size: 30rpx;
        padding-left: 42rpx;
      }
    }

    .rank_list-card {
      display: grid;
      gap: 20rpx 38rpx;
      grid-template-columns: repeat(2, 1fr);
      place-items: center;
      padding: 24rpx 60rpx 0;

      .card {
        width: 100%;
        min-height: 56rpx;
        line-height: 56rpx;
        text-align: center;
        border-radius: 8rpx;
        background: #0084ff;
        color: #fff;
        white-space: nowrap;
        font-size: 24rpx;
      }
    }
  }
}

.process_list {
  background: #fff;
  border-radius: 16rpx;

  .process {
    display: flex;
    border-bottom: 1px solid #eaecef;
    align-items: center;
    padding: 29rpx 20rpx;
    justify-content: space-between;

    image {
      width: 36rpx;
      height: 36rpx;
    }

    .process_number {
      font-weight: 550;
      // text-align: center;
      font-size: 34rpx;
    }

    .process_info {
      width: 62%;
      display: flex;
      flex-direction: column;

      .process_info_title {
          /*min-height: 40rpx;
          line-height: 40rpx;*/
          margin-bottom: 20rpx;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 3;
          overflow: hidden;
          text-overflow: ellipsis;
          text-align: justify;
          font-family: Source Han Sans;
          font-size: 32rpx;
          font-weight: 500;
          word-break: break-all;
          color: #1C2126;
      }

      .info {
          display: flex;
          align-items: flex-end;
          color: #828d99;
          font-family: Source Han Sans;
          font-size: 24rpx;
          font-weight: 500;
          line-height: 40rpx;
    
          view {
              line-height: 1;
        
              + view {
                  margin-left: 24rpx;
              }
          }
      }
    }

    .type {
      width: 56rpx;
      height: 72rpx;
    }
  }
}

.search_model {
    width: 100%;
    padding: 0 0 20rpx;
    
    .search_header {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10rpx 0 10rpx 0;
        font-size: 30rpx;
        font-family: Source Han Sans;

    min-height: 40rpx;
    line-height: 40rpx;
    image {
      width: 40rpx;
      height: 40rpx;
      margin-right: 24rpx;
      vertical-align: center;
    }
    .line-height {
      display: flex;
        &.line_height{
            align-items: center;
            image{
                width: 26rpx;
                height: 26rpx;
            }
        }
    }
  }
    .header{
        font-family: Source Han Sans;
        font-size: 32rpx;
        font-weight: 500;
    }
  .empty_class {
    width: 100%;
    height: 50vh;
    display: flex;
    justify-content: center;
    align-items: center;
    image {
      width: 224rpx;
      height: 338rpx;
    }
  }

  .header {
    width: 100%;
    padding: 10rpx 0 10rpx 10rpx;
    // font-weight: 550;
    font-size: 30rpx;
    color: #0084ff;
    font-size: 30rpx;

    .histroy {
      width: 36rpx;
      height: 36rpx;
      margin-bottom: -5rpx;
      margin-right: 20rpx;
    }

    .screen {
      display: flex;
      align-items: center;
    }

    .delete {
      float: right;
    }
  }

  .screen_content {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
    padding: 16rpx 20rpx;
    background: white;
    border-radius: 16rpx;

    .content_item {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      height: 50px;
      width: 100%;
      line-height: 50px;
      font-size: 26rpx;
      //border-bottom: 1px solid #D8D8D8;
      display: flex;
      align-items: center;

      &:nth-last-child(1) {
        border: none;
      }

      .process_number {
        width: 36rpx;
        height: 36rpx;
        border-radius: 8rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        color: white;
        background: #dcdee1;
        margin-right: 20rpx;
        border: none;
      }
      .content_text {
        width: calc(100% - 36rpx);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
          font-family: 思源黑体;
          font-size: 30rpx;
          color: #1C2126;
      }
    }

    .screen_lists {
      width: 100%;
      .screen_lists_item {
        padding: 20rpx 0;
        & + .screen_lists_item {
          border-top: 1px solid #eaecef;
        }
      }
      .screen_list {
        width: 100%;
        display: grid;
        grid-template-columns: 44rpx 1fr 160rpx;
        grid-column-gap: 30rpx;
        align-items: center;
        .like-icon {
          width: 44rpx;
          height: 44rpx;
        }
        .screen_title_info {
          display: flex;
          flex-direction: column;
          .screen_title {
            width: 100%;
            font-weight: 500;
              font-family: Source Han Sans;
              font-size: 32rpx;
            box-sizing: border-box;
            text-align: justify;
            line-height: 1.5;
          }

          .screen_version {
            font-size: 28rpx;
            color: #4c5a67;
            //padding-left: 20rpx;
            margin-top: 10rpx;
              font-family: Source Han Sans;
          }
        }

        .screen_type {
          width: 160rpx;
          height: 90rpx;
          align-self: start;
        }
      }
      .screen_info {
        width: 100%;
        margin-top: 10rpx;
        padding: 0 20rpx 0 74rpx;
        text-align: justify;
        line-height: 1.5;
          font-family: Source Han Sans;
          font-size: 30rpx;
      }
      .screen_bottom {
        width: 60px;
        height: 20px;
        border-radius: 6px;
        font-size: 24rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 20rpx 0 0 74rpx;
          font-family: Source Han Sans;
        &.gray {
          background: #f4f6f9;
          color: #4c5a67;
        }
        &.blue {
          background: #e8f8ff;
          color: #0084ff;
        }
      }
    }
  }
    .search_model_scroll{
        height: calc(100vh - 266rpx)
    }
    .filter_view{
        min-height: 100rpx;
        border-radius: 16rpx;
        opacity: 1;
        background: #FFFFFF;
        .filter_view_text{
            width: 100%;
            line-height: 100rpx;
            height: 100rpx;
            font-family: 思源黑体;
            font-size: 30rpx;
            font-weight: normal;
            letter-spacing: 0px;
            color: #1C2126;
            word-break: break-all;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
            overflow: hidden;
            text-overflow: ellipsis;
            padding: 0 30rpx;
            cursor: pointer;
            &:first-child{
                color: #0084FF;
            }
            &:nth-child(1){
                position: relative;
                &:before{
                    position: absolute;
                    bottom: 0;
                    left: 10rpx;
                    right: 10rpx;
                    content: '';
                    border-top: 1rpx solid #D8D8D8;
                }
            }
        }
    }
}

.screen_model {
  padding: 20rpx;
  max-height: calc(100vh - 300rpx);
  overflow-y: auto;
  position: relative;

  .screen_model_box {
    .screen_model_box_title {
      display: flex;
      align-items: center;
      font-weight: bold;
      font-family: Source Han Sans;
      font-size: 16px;
      height: 108rpx;
      line-height: 108rpx;
    }
    image {
      width: 44rpx;
      height: 36rpx;
      margin-right: 20rpx;
    }
  }

  .screen_model_title {
    font-size: 32rpx;
    text-align: center;
    font-family: Source Han Sans;
    font-weight: bold;
    line-height: 64rpx;
    padding-bottom: 20rpx;
    border-bottom: 1rpx solid #e3dfdf;
  }

  .u-page__tag-item {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    // justify-content: space-between;
    text-align: center;
    // gap: 25rpx;
    //gap: 25rpx 3%;

    .tag {
      width: calc((100% - 78rpx) / 3);
      height: 35px;
      line-height: 35px;
      border-radius: 8px;
      font-family: Source Han Sans;
      font-size: 15px;
      word-break: break-all;
      padding: 0 10rpx;
      margin: 13rpx;
      &.tag_gray {
        background: #f6f6f6;
        color: #1c2126;
      }
      &.tag_blue {
        background: #e8f8ff;
        color: #0084ff;
      }
    }
  }

  .screen_model_bottom {
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin-top: 50rpx;
    position: sticky;
    bottom: 0;
    background: #ffffff;
    padding: 10px;
    .u-button {
      width: 45%;
      border-radius: 16rpx;
      border-width: 1rpx;
    }
  }
}

.loadMore {
  color: #b5b5b5;
  line-height: 2;
  font-size: 12px;
  text-align: center;
}
.more-line-clamp {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 999;
  overflow: hidden;
  text-overflow: ellipsis;
}
.one-line-clamp {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
  text-overflow: ellipsis;
}

// ::v-deep .u-transition{
// 	// z-index: 1 !important;
// }
</style>
